<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试Tooltip功能</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        #chart {
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>测试鼠标悬停显示信息</h1>
    <div id="chart"></div>
    
    <script>
        // 模拟数据
        const testData = [
            { date: '2024-01-01', price: 10.50, changeRatio: 2.5 },
            { date: '2024-01-02', price: 10.75, changeRatio: 2.38 },
            { date: '2024-01-03', price: 10.30, changeRatio: -4.19 },
            { date: '2024-01-04', price: 10.80, changeRatio: 4.85 },
            { date: '2024-01-05', price: 10.65, changeRatio: -1.39 },
            { date: '2024-01-06', price: 10.90, changeRatio: 2.35 },
            { date: '2024-01-07', price: 10.45, changeRatio: -4.13 },
            { date: '2024-01-08', price: 10.70, changeRatio: 2.39 }
        ];
        
        const chart = echarts.init(document.getElementById('chart'));
        
        const option = {
            title: {
                text: '股票价格走势'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    const dataIndex = params[0].dataIndex;
                    const date = params[0].axisValue;
                    const price = params[0].value;
                    const currentData = testData[dataIndex];
                    
                    if (!currentData) return '加载中...';
                    
                    const changeRatio = parseFloat(currentData.changeRatio) || 0;
                    const changeColor = changeRatio >= 0 ? '#f56c6c' : '#67c23a';
                    const changeSymbol = changeRatio >= 0 ? '+' : '';
                    
                    return `
                        <div style="padding: 8px; font-size: 13px;">
                            <div><strong>${date}</strong></div>
                            <div>股价: ¥${price.toFixed(3)}</div>
                            <div style="color: ${changeColor}">涨跌幅: ${changeSymbol}${changeRatio.toFixed(2)}%</div>
                        </div>
                    `;
                }
            },
            xAxis: {
                type: 'category',
                data: testData.map(item => item.date)
            },
            yAxis: {
                type: 'value',
                name: '价格'
            },
            series: [{
                name: '价格',
                type: 'line',
                data: testData.map(item => item.price),
                smooth: true
            }]
        };
        
        chart.setOption(option);
        
        // 响应式
        window.addEventListener('resize', () => {
            chart.resize();
        });
        
        console.log('测试图表已加载，请将鼠标悬停在数据点上查看信息');
    </script>
</body>
</html>